<template>
  <div id="app">
    <h1 style="text-align: center; margin-bottom: 6px;">采集设置</h1>
    <Form :label-width="160">
      <FormItem label="书ID：">
        <Input v-model.trim="form.bookId" placeholder="" size="large" style="width: 200px;" />
        <Button v-if="historyJson.length>0" type="default" @click="loadHistory" class="ml" size="large">加载上次设置</Button>
      </FormItem>
      <FormItem label="采集类型：" v-if="form.bookId">
        <RadioGroup v-model="form.articleType" size="large">
          <Radio v-for="(at, i) in articleTypes" :key="i" :label="at.type" >
            <span>{{at.type}}</span>
          </Radio>
        </RadioGroup>
      </FormItem>
      <template v-if="articleType">
        <FormItem v-for="(column,i) in articleType.columns" :label="column.label + '：'" :key="i">
          <Input v-model.trim="column.value" type="textarea" size="large" :placeholder="column.placeholder" autosize class="mt" v-if="column.type && column.type==='textarea'" />
          <Input v-model.trim="column.value" size="large" :placeholder="column.placeholder" class="mt" v-else />
        </FormItem>
        <template v-if="!isSingleMode">
          <FormItem label="开始日期：">
            <DatePicker type="date" size="large" placeholder="包含当日" v-model="form.beginDate" @on-change="beginDateChange" class="mt" style="width: 200px;"></DatePicker>
          </FormItem>
          <FormItem label="结束日期：">
            <DatePicker type="date" size="large" placeholder="不包含当日" v-model="form.endDate" @on-change="endDateChange" class="mt" style="width: 200px;"></DatePicker>
          </FormItem>
          <FormItem label="关键词：">
            <RadioGroup size="large" v-model="form.keymode">
              <Radio label="不使用">不使用</Radio>
              <Radio label="包含">包含</Radio>
              <Radio label="排除">排除</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem label="" v-if="form.keymode!=='不使用'">
            <Input v-model="form.keywords" size="large" placeholder="多个关键词用逗号隔开" class="mt" style="width: 400px;" />
          </FormItem>
        </template>
        <FormItem label="">
          <Button type="primary" size="large" @click="yes" style="width: 200px;">确定</Button>
          <span style="color:green; margin-left: 8px;">{{ message }}</span>
        </FormItem>
      </template>
    </Form>
    <input type="hidden" id="result" v-model="resultJson" />
    <input type="hidden" v-model="historyJson" />
  </div>
</template>

<script>
import { articleTypes } from './config'

export default {
  name: 'App',
  data: function () {
    return {
      articleTypes,
      form: {
        bookId: '',
        articleType: '',
        keymode: '不使用', // 关键词模式：不使用|包含|排除与
        keywords: '', // 关键词值
        beginDate: '', // 开始日期
        endDate: '', // 结束日期
        inputs: []
      },
      resultJson: '',
      historyJson: '',
      message: ''
    }
  },
  computed: {
    articleType: function () {
      if (this.form.articleType) {
        return this.articleTypes.find(item => item.type ===  this.form.articleType)
      }
      return null
    },
    isSingleMode: function () {
      return this.form.articleType.indexOf('单篇') > -1 || this.form.articleType === '失败图片处理'
    }
  },
  created () {
    window.setHistoryJson = this.setHistoryJson
  },
  methods: {
    yes: function () {
      if (this.form.bookId === '') {
        this.$Modal.warning({title: '提示', content: '请输入书ID'})
        return
      }
      if (this.form.articleType === '') {
        this.$Modal.warning({title: '提示', content: '请选择采集类型'})
        return
      }
      let inputs = []
      for (let i = 0; i < this.articleType.columns.length; i++) {
        if (this.articleType.columns[i].value === '' && this.articleType.columns[i].required) {
          this.$Modal.warning({title: '提示', content: '请填写' + this.articleType.columns[i].label})
          return
        }
        inputs.push(this.articleType.columns[i].value)
      }
      this.form.inputs = inputs
      this.resultJson = JSON.stringify(this.form)
      this.message = '设置成功！'
    },
    beginDateChange: function (value) {
      this.form.beginDate = value
    },
    endDateChange: function (value) {
      this.form.endDate = value
    },
    loadHistory: function () {
      if (this.historyJson) {
        const obj = JSON.parse(this.historyJson)
        // let inputs = obj.inputs
        // delete obj.inputs
        Object.assign(this.form, obj)
        if (this.articleType && obj.inputs.length === this.articleType.columns.length) {
          for (let i = 0; i < this.articleType.columns.length; i++) {
            this.articleType.columns[i].value = obj.inputs[i]
          }
        }
        this.historyJson = ''
      }
    },
    setHistoryJson: function (value) {
      this.historyJson = value
    }
  }
}
</script>

<style>
#app {
  padding: 1em;
  max-width: 1080px;
  margin: 0 auto;
  background-color: white;
}
.ivu-form-item { margin-bottom: 0px !important; }
.ivu-form-item-label { font-size: 1.2em !important; }
.mt { margin-bottom: 8px; }
.ml { margin-left: 8px; }
</style>
